<template>
  <u-popup :show="isShowError" mode="center" round="20rpx">
    <view class="modal">
      <div v-if="advertisement" class="advertisement">
        <image
          :src="advertisement.picUrl"
          @click="handleJumpAd(advertisement)"
        />
      </div>
      <view class="footer flex-align-center">
        <u-icon name="close-circle" @click="close" size="40" />
      </view>
    </view>
  </u-popup>
</template>

<script>
import jumpAdvertisement from "@/pages/sp-store/mixin/link-wifi/jumpAdvertisement";

export default {
  mixins: [jumpAdvertisement],
  data() {
    return {
      buttonStyle: {
        width: "250rpx",
      },
      isShowError: false,
      advertisement: null,
    };
  },
  computed: {},
  methods: {
    open(obj) {
      this.advertisement = obj;
      this.$nextTick(() => {
        this.isShowError = true;
      });
    },
    close() {
      this.isShowError = false;
    },
  },
};
</script>

<style scoped lang="scss">
.modal {
  width: 80vw;
  position: relative;
}
.advertisement {
  width: 100%;
  height: 500rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.footer {
  bottom: -110rpx;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
</style>
